M
MLOG
પ્રોગ્રેસિવ વેબ એપ આર્કિટેક્ચર: જાવાસ્ક્રિપ્ટ સર્વિસ વર્કર પેટર્ન્સ | MLOG | MLOG

૪. નેટવર્ક-ઓન્લી (Network-Only)

નેટવર્ક-ઓન્લી સ્ટ્રેટેજી હંમેશા નેટવર્કમાંથી એસેટ્સ મેળવે છે, કેશને સંપૂર્ણપણે બાયપાસ કરે છે. આ સ્ટ્રેટેજીનો ઉપયોગ ત્યારે થાય છે જ્યારે તમારે રિસોર્સના લેટેસ્ટ વર્ઝનની સંપૂર્ણપણે જરૂર હોય અને કેશિંગ ઇચ્છનીય ન હોય.

ઉદાહરણ: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
  );
});

૫. સ્ટેલ-વ્હાઇલ-રિવેલિડેટ (Stale-While-Revalidate)

સ્ટેલ-વ્હાઇલ-રિવેલિડેટ સ્ટ્રેટેજી કેશ કરેલ એસેટને તરત જ સર્વ કરે છે અને સાથે સાથે નેટવર્કમાંથી લેટેસ્ટ વર્ઝન પણ મેળવે છે. જ્યારે નેટવર્ક રિક્વેસ્ટ પૂર્ણ થાય છે, ત્યારે કેશ નવા વર્ઝન સાથે અપડેટ થાય છે. આ સ્ટ્રેટેજી ઝડપી પ્રારંભિક પ્રતિસાદ આપે છે અને એ પણ સુનિશ્ચિત કરે છે કે વપરાશકર્તાને આખરે સૌથી અપ-ટુ-ડેટ કન્ટેન્ટ મળે. આ બિન-જરૂરી કન્ટેન્ટ માટે ઉપયોગી સ્ટ્રેટેજી છે જે સંપૂર્ણ તાજગી કરતાં ગતિથી વધુ લાભ મેળવે છે.

ઉદાહરણ: 

            
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open('my-cache').then(cache => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });
        });
        return response || fetchPromise;
      })
  );
});

૬. કેશ, પછી નેટવર્ક (Cache, then Network)

સ્ટેલ-વ્હાઇલ-રિવેલિડેટ જેવું જ છે પરંતુ કેશ કરેલ એસેટને તરત જ પાછી મોકલ્યા વિના. તે પહેલા કેશ તપાસે છે, અને જો એસેટ હાજર હોય તો જ કેશ અપડેટ કરવા માટે નેટવર્ક રિક્વેસ્ટ બેકગ્રાઉન્ડમાં આગળ વધશે.

યોગ્ય કેશિંગ સ્ટ્રેટેજી પસંદ કરવી

શ્રેષ્ઠ કેશિંગ સ્ટ્રેટેજી તમારી એપ્લિકેશનની ચોક્કસ જરૂરિયાતો પર આધાર રાખે છે. આ જેવા પરિબળોને ધ્યાનમાં લો:

યોગ્ય કેશિંગ સ્ટ્રેટેજીસને કાળજીપૂર્વક પસંદ કરીને, તમે તમારા PWA ના પર્ફોર્મન્સ અને વપરાશકર્તા અનુભવને નોંધપાત્ર રીતે સુધારી શકો છો, ઓફલાઇન વાતાવરણમાં પણ. Workbox ([https://developers.google.com/web/tools/workbox](https://developers.google.com/web/tools/workbox)) જેવા ટૂલ્સ આ સ્ટ્રેટેજીસના અમલીકરણને સરળ બનાવી શકે છે.

બેકગ્રાઉન્ડ સિંક્રોનાઇઝેશન: ઓફલાઇન મ્યુટેશન્સને હેન્ડલ કરવું

બેકગ્રાઉન્ડ સિંક્રોનાઇઝેશન તમારા PWA ને બેકગ્રાઉન્ડમાં કાર્યો કરવાની મંજૂરી આપે છે, ભલે વપરાશકર્તા ઓફલાઇન હોય. આ ખાસ કરીને ફોર્મ સબમિશન, ડેટા અપડેટ્સ અને અન્ય કામગીરીઓ માટે ઉપયોગી છે જેને નેટવર્ક કનેક્ટિવિટીની જરૂર હોય છે. `BackgroundSyncManager` API તમને એવા કાર્યોને રજીસ્ટર કરવા સક્ષમ કરે છે જે નેટવર્ક ઉપલબ્ધ થાય ત્યારે એક્ઝિક્યુટ થશે.

બેકગ્રાઉન્ડ સિંક ટાસ્ક રજીસ્ટર કરવું

બેકગ્રાઉન્ડ સિંક ટાસ્ક રજીસ્ટર કરવા માટે, તમારે `BackgroundSyncManager` ની `register` મેથડનો ઉપયોગ કરવાની જરૂર છે. આ મેથડ એક યુનિક ટેગ નામ આર્ગ્યુમેન્ટ તરીકે લે છે. ટેગ નામ કરવાના ચોક્કસ કાર્યને ઓળખે છે.

ઉદાહરણ:

            
self.addEventListener('sync', event => {
  if (event.tag === 'my-sync-task') {
    event.waitUntil(doSomeWork());
  }
});

સિંક ઇવેન્ટને હેન્ડલ કરવું

જ્યારે બ્રાઉઝર નેટવર્ક કનેક્ટિવિટી શોધે છે, ત્યારે તે સર્વિસ વર્કરને `sync` ઇવેન્ટ મોકલે છે. તમે આ ઇવેન્ટને સાંભળી શકો છો અને જરૂરી ક્રિયાઓ કરી શકો છો, જેમ કે સર્વર પર ડેટા મોકલવો.

ઉદાહરણ:

            
async function doSomeWork() {
  // Retrieve data from IndexedDB
  const data = await getDataFromIndexedDB();

  // Send data to the server
  try {
    const response = await fetch('/api/sync', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });

    if (response.ok) {
      // Clear the data from IndexedDB
      await clearDataFromIndexedDB();
    } else {
      // Handle errors
      console.error('Sync failed:', response.status);
      throw new Error('Sync failed');
    }
  } catch (error) {
    // Handle network errors
    console.error('Network error:', error);
    throw error;
  }
}

ઉદાહરણ: ઓફલાઇન ફોર્મ સબમિશન

એક એવી પરિસ્થિતિની કલ્પના કરો જ્યાં વપરાશકર્તા ઓફલાઇન હોય ત્યારે ફોર્મ ભરે છે. સર્વિસ વર્કર ફોર્મ ડેટાને IndexedDB માં સ્ટોર કરી શકે છે અને બેકગ્રાઉન્ડ સિંક ટાસ્ક રજીસ્ટર કરી શકે છે. જ્યારે નેટવર્ક ઉપલબ્ધ થશે, ત્યારે સર્વિસ વર્કર IndexedDB માંથી ફોર્મ ડેટા મેળવશે અને તેને સર્વર પર સબમિટ કરશે.

  1. વપરાશકર્તા ફોર્મ ભરે છે અને ઓફલાઇન હોય ત્યારે સબમિટ પર ક્લિક કરે છે.
  2. ફોર્મ ડેટા IndexedDB માં સ્ટોર થાય છે.
  3. એક બેકગ્રાઉન્ડ સિંક ટાસ્ક યુનિક ટેગ (ઉદાહરણ તરીકે, `form-submission`) સાથે રજીસ્ટર થાય છે.
  4. જ્યારે નેટવર્ક ઉપલબ્ધ હોય, ત્યારે `sync` ઇવેન્ટ ટ્રિગર થાય છે.
  5. સર્વિસ વર્કર IndexedDB માંથી ફોર્મ ડેટા મેળવે છે અને તેને સર્વર પર સબમિટ કરે છે.
  6. જો સબમિશન સફળ થાય, તો ફોર્મ ડેટા IndexedDB માંથી દૂર કરવામાં આવે છે.

પુશ નોટિફિકેશન્સ: સમયસર અપડેટ્સ સાથે વપરાશકર્તાઓને જોડવા

પુશ નોટિફિકેશન્સ તમારા PWA ને વપરાશકર્તાઓને સમયસર અપડેટ્સ અને સંદેશા મોકલવા સક્ષમ બનાવે છે, ભલે એપ બ્રાઉઝરમાં સક્રિય રીતે ચાલી રહી ન હોય. આ વપરાશકર્તાની સંલગ્નતા અને રીટેન્શનને નોંધપાત્ર રીતે સુધારી શકે છે. Push API અને Notifications API પુશ નોટિફિકેશન્સ પહોંચાડવા માટે સાથે મળીને કામ કરે છે.

પુશ નોટિફિકેશન્સ માટે સબ્સ્ક્રાઇબ કરવું

પુશ નોટિફિકેશન્સ પ્રાપ્ત કરવા માટે, વપરાશકર્તાઓએ પહેલા તમારા PWA ને પરવાનગી આપવી આવશ્યક છે. તમે વપરાશકર્તાઓને પુશ નોટિફિકેશન્સ માટે સબ્સ્ક્રાઇબ કરવા માટે `PushManager` API નો ઉપયોગ કરી શકો છો.

ઉદાહરણ:

            
navigator.serviceWorker.ready.then(registration => {
  registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_PUBLIC_VAPID_KEY'
  })
  .then(subscription => {
    // Send subscription details to your server
    sendSubscriptionToServer(subscription);
  })
  .catch(error => {
    console.error('Failed to subscribe:', error);
  });
});

મહત્વપૂર્ણ: `YOUR_PUBLIC_VAPID_KEY` ને તમારી વાસ્તવિક VAPID (Voluntary Application Server Identification) કી સાથે બદલો. VAPID કીનો ઉપયોગ તમારા એપ્લિકેશન સર્વરને ઓળખવા અને પુશ નોટિફિકેશન્સ સુરક્ષિત રીતે મોકલવામાં આવે તેની ખાતરી કરવા માટે થાય છે.

પુશ નોટિફિકેશન્સને હેન્ડલ કરવું

જ્યારે પુશ નોટિફિકેશન પ્રાપ્ત થાય છે, ત્યારે સર્વિસ વર્કર `push` ઇવેન્ટ મોકલે છે. તમે આ ઇવેન્ટને સાંભળી શકો છો અને વપરાશકર્તાને નોટિફિકેશન બતાવી શકો છો.

ઉદાહરણ:

            
self.addEventListener('push', event => {
  const payload = event.data ? event.data.text() : 'No payload';

  event.waitUntil(
    self.registration.showNotification('My PWA', {
      body: payload,
      icon: 'icon.png'
    })
  );
});

પુશ નોટિફિકેશન્સને કસ્ટમાઇઝ કરવું

Notifications API તમને પુશ નોટિફિકેશન્સના દેખાવ અને વર્તનને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે. તમે ટાઇટલ, બોડી, આઇકન, બેજ અને અન્ય વિકલ્પો સ્પષ્ટ કરી શકો છો.

ઉદાહરણ:

            
self.addEventListener('push', event => {
  const data = event.data.json();
  const title = data.title || 'My PWA';
  const options = {
    body: data.body || 'No message',
    icon: data.icon || 'icon.png',
    badge: data.badge || 'badge.png',
    vibrate: [200, 100, 200],
    data: { // Custom data that you can access when the user clicks the notification
      url: data.url || '/'
    },
    actions: [
      {action: 'explore', title: 'Explore this new world',
        icon: 'images/checkmark.png'},
      {action: 'close', title: 'Close',
        icon: 'images/xmark.png'},
    ]
  };

  event.waitUntil(self.registration.showNotification(title, options));
});


self.addEventListener('notificationclick', function(event) {
  event.notification.close();

  // Check if the user clicked on an action.
  if (event.action === 'explore') {
    clients.openWindow(event.notification.data.url);
  } else {
    // Default action: open the app.
    clients.openWindow('/');
  }
});

ઉદાહરણ: ન્યૂઝ એલર્ટ

એક ન્યૂઝ એપ્લિકેશન બ્રેકિંગ ન્યૂઝ સ્ટોરીઝ વિશે વપરાશકર્તાઓને ચેતવણી આપવા માટે પુશ નોટિફિકેશન્સનો ઉપયોગ કરી શકે છે. જ્યારે કોઈ નવો લેખ પ્રકાશિત થાય છે, ત્યારે સર્વર વપરાશકર્તાના ઉપકરણ પર પુશ નોટિફિકેશન મોકલે છે, જે લેખનો સંક્ષિપ્ત સારાંશ દર્શાવે છે. વપરાશકર્તા પછી નોટિફિકેશન પર ક્લિક કરીને PWA માં સંપૂર્ણ લેખ ખોલી શકે છે.

એડવાન્સ્ડ સર્વિસ વર્કર પેટર્ન્સ

૧. ઓફલાઇન એનાલિટિક્સ

વપરાશકર્તા ઓફલાઇન હોય ત્યારે પણ તેમના વર્તનને ટ્રેક કરો, એનાલિટિક્સ ડેટાને સ્થાનિક રીતે સ્ટોર કરીને અને નેટવર્ક ઉપલબ્ધ થાય ત્યારે તેને સર્વર પર મોકલીને. આ IndexedDB અને બેકગ્રાઉન્ડ સિંકનો ઉપયોગ કરીને પ્રાપ્ત કરી શકાય છે.

૨. વર્ઝનિંગ અને અપડેટિંગ

તમારા સર્વિસ વર્કર માટે એક મજબૂત વર્ઝનિંગ સ્ટ્રેટેજી લાગુ કરો જેથી વપરાશકર્તાઓને તેમના અનુભવને ખલેલ પહોંચાડ્યા વિના હંમેશા લેટેસ્ટ અપડેટ્સ મળે. જૂના કેશ કરેલા એસેટ્સને અમાન્ય કરવા માટે કેશ બસ્ટિંગ તકનીકોનો ઉપયોગ કરો.

૩. મોડ્યુલર સર્વિસ વર્કર્સ

જાળવણી અને વાંચનક્ષમતા સુધારવા માટે તમારા સર્વિસ વર્કર કોડને મોડ્યુલોમાં ગોઠવો. જાવાસ્ક્રિપ્ટ મોડ્યુલો (ESM) અથવા Webpack કે Rollup જેવા મોડ્યુલ બંડલરનો ઉપયોગ કરો.

૪. ડાયનેમિક કેશિંગ

વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ અને વપરાશ પેટર્ન પર આધારિત એસેટ્સને ગતિશીલ રીતે કેશ કરો. આ કેશનું કદ ઓપ્ટિમાઇઝ કરવામાં અને પર્ફોર્મન્સ સુધારવામાં મદદ કરી શકે છે.

સર્વિસ વર્કર ડેવલપમેન્ટ માટે શ્રેષ્ઠ પદ્ધતિઓ

નિષ્કર્ષ

જાવાસ્ક્રિપ્ટ સર્વિસ વર્કર્સ મજબૂત, કાર્યક્ષમ અને આકર્ષક PWAs બનાવવા માટે શક્તિશાળી સાધનો છે. સર્વિસ વર્કર લાઇફસાયકલને સમજીને અને યોગ્ય કેશિંગ સ્ટ્રેટેજીસ, બેકગ્રાઉન્ડ સિંક્રોનાઇઝેશન અને પુશ નોટિફિકેશન્સ લાગુ કરીને, તમે ઓફલાઇન વાતાવરણમાં પણ અસાધારણ વપરાશકર્તા અનુભવો બનાવી શકો છો. આ લેખે વૈશ્વિક પ્રેક્ષકો માટે સફળ PWAs બનાવવામાં તમને માર્ગદર્શન આપવા માટે મુખ્ય સર્વિસ વર્કર પેટર્ન્સ અને શ્રેષ્ઠ પદ્ધતિઓનું અન્વેષણ કર્યું છે. જેમ જેમ વેબનો વિકાસ થતો રહેશે, તેમ તેમ સર્વિસ વર્કર્સ વેબ ડેવલપમેન્ટના ભવિષ્યને આકાર આપવામાં વધુને વધુ મહત્વપૂર્ણ ભૂમિકા ભજવશે.

યાદ રાખો કે આ પેટર્ન્સને તમારી ચોક્કસ એપ્લિકેશનની જરૂરિયાતોને અનુરૂપ બનાવો અને હંમેશા વપરાશકર્તા અનુભવને પ્રાથમિકતા આપો. સર્વિસ વર્કર્સની શક્તિને અપનાવીને, તમે એવા PWAs બનાવી શકો છો જે માત્ર કાર્યાત્મક જ નહીં પરંતુ ઉપયોગમાં આનંદદાયક પણ હોય, વપરાશકર્તાના સ્થાન અથવા નેટવર્ક કનેક્શનને ધ્યાનમાં લીધા વિના.

વધુ સંસાધનો: